import React, { memo, useEffect } from 'react';

import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getHotRecommendsAction } from '../../store/actionCreators';
import { HOT_RECOMMEND_LIMIT } from '@/common/contants';

import ThemeHeader from '@/components/theme-header-rcm';
import { HotRecommendWrapper } from './style';
import SongsCover from '@/components/songs-cover';


const HotRecommend = memo(() => {
    // state

    //hooks
    const dispatch = useDispatch()
    const { hotRecommends } = useSelector(state => {
        return {
            hotRecommends: state.getIn(["recommend", "hotRecommends"])
        }
    }, shallowEqual)
    useEffect(() => {
        dispatch(getHotRecommendsAction(HOT_RECOMMEND_LIMIT))
    }, [dispatch])
    return (
        <HotRecommendWrapper>
            <ThemeHeader title="热门推荐" keywords={["华宇", "流行", "民谣", "摇滚", "电子"]}></ThemeHeader>
            <div className="recommend-list"> 
                {
                        hotRecommends.map((item, index) => {
                            return (
                                <SongsCover key={item.id} info={item}>
                                    {item.name}
                                </SongsCover>
                            )
                        })
                    }
                </div>
        </HotRecommendWrapper>
    );
});

export default HotRecommend;